import React, { useState, useEffect,useContext } from 'react'
import { reqcartadd, reqgetgoodsinfo } from '../../http/api'
import Header from '../../components/Header/Header'
import { $pre } from "../../http/http"
import "./detail.less"
import { Toast, Button } from 'antd-mobile'
import { MyContext } from '../../App'

const Detail = (props) => {
  // 初始化数据
  const [arr, setArr ] = useState([])
  const {state:{userInfo:{uid}}}=useContext(MyContext)
  // 请求数据
  useEffect(() => {
    reqgetgoodsinfo({ id: props.match.params.id }).then(res => {
      setArr(res.data.list[0])
    })
  }, [])

  // 加入购物车
  const addShop = () => {
    reqcartadd({
      uid,
      goodsid: props.match.params.id,
      num: 1,
      type: 1
    }).then(res => {
      if (res.data.code == 200) {
        Toast.show({ content: res.data.msg })
      }
    })
  }
  return (
    <div className='detail'>
      <Header back title="商品详情"></Header>
      <div>
        <img className='img' src={$pre + arr.img} alt="" />
        <span style={{ color: "orangered", fontSize: "30px" }}>{"¥" + arr.price}</span>
        <span style={{ textDecoration: "line-through", fontSize: "22px", color: "#ccc" }}>{"¥" + arr.market_price}</span>
        <p>{arr.goodsname}</p>
      </div>
      <Button color="danger" onClick={() => addShop()}>加入购物车</Button>
    </div>
  )
}

export default Detail